<template>
  <div class="user-order-list">
    <h1 class="title">我的订单</h1>
    <el-tabs v-model="$store.state.orderListActiveName">
      <el-tab-pane label="全部订单" name="first">
        <div v-if="userAllOrderList.length > 0">
          <el-card
            v-for="item in userAllOrderList"
            :key="item.orderListId"
            class="order"
            shadow="hover"
          >
            <div slot="header" class="clearfix">
              <el-descriptions
                :title="item.status"
                :column="3"
                size="small"
                border
              >
                <template slot="extra">
                  <el-button class="order-delete el-icon-delete" type="text">
                  </el-button>
                </template>
                <el-descriptions-item label="支付用户">
                  {{ $store.state.username }}
                </el-descriptions-item>
                <el-descriptions-item label="支付时间">
                  {{ item.time }}
                </el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  微信支付
                </el-descriptions-item>
                <el-descriptions-item label="订单号">
                  {{ item.orderListId }}
                </el-descriptions-item>
                <el-descriptions-item label="实付金额">
                  {{ item.totalPrice }}元
                </el-descriptions-item>
                <el-descriptions-item label="备注"> 无 </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="order-items">
              <div
                v-for="item in item.items"
                :key="item.itemId"
                class="goods-list"
              >
                <div class="figure">
                  <img
                    :src="item.itemSwiperImgUrl[0].url"
                    width="80"
                    height="80"
                    alt=""
                  />
                </div>
                <p class="goods-list-name">{{ item.title }}</p>
                <p class="goods-list-price">
                  {{ item.discountPrice }}元 x {{ item.count }}
                </p>
              </div>
            </div>
            <div class="order-actions">
              <!-- <a href="#" class="">订单详情</a> -->
              <a
                v-if="item.status == '待支付'"
                @click="openPayDialog(item.orderListId)"
              >
                立即支付
              </a>
            </div>
          </el-card>
        </div>
        <el-empty
          :image-size="200"
          description="当前没有订单。"
          v-if="userAllOrderList.length == 0"
        ></el-empty>
        <!-- <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="2"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="3"
          >
            total可以用来获取总数
          pagesize是每页有多少个订单
          </el-pagination>
        </div> -->
      </el-tab-pane>
      <el-tab-pane label="待支付" name="second">
        <div v-if="userPayingOrderList.length > 0">
          <el-card
            v-for="item in userPayingOrderList"
            :key="item.orderListId"
            class="order"
            shadow="hover"
          >
            <div slot="header" class="clearfix">
              <el-descriptions
                :title="item.status"
                :column="3"
                size="small"
                border
              >
                <template slot="extra">
                  <el-button class="order-delete el-icon-delete" type="text">
                  </el-button>
                </template>
                <el-descriptions-item label="支付用户">
                  {{ $store.state.username }}
                </el-descriptions-item>
                <el-descriptions-item label="支付时间">
                  {{ item.time }}
                </el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  微信支付
                </el-descriptions-item>
                <el-descriptions-item label="订单号">
                  {{ item.orderListId }}
                </el-descriptions-item>
                <el-descriptions-item label="实付金额">
                  {{ item.totalPrice }}元
                </el-descriptions-item>
                <el-descriptions-item label="备注"> 无 </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="order-items">
              <div
                v-for="item in item.items"
                :key="item.itemId"
                class="goods-list"
              >
                <div class="figure">
                  <img
                    :src="item.itemSwiperImgUrl[0].url"
                    width="80"
                    height="80"
                    alt=""
                  />
                </div>
                <p class="goods-list-name">{{ item.title }}</p>
                <p class="goods-list-price">
                  {{ item.discountPrice }}元 x {{ item.count }}
                </p>
              </div>
            </div>
            <div class="order-actions">
              <!-- <a href="#" class="">订单详情</a> -->
              <a
                v-if="item.status == '待支付'"
                @click="openPayDialog(item.orderListId)"
              >
                立即支付
              </a>
            </div>
          </el-card>
        </div>
        <el-empty
          :image-size="200"
          description="当前没有待支付订单。"
          v-if="userPayingOrderList.length == 0"
        ></el-empty>
      </el-tab-pane>
      <el-tab-pane label="待收货" name="third">
        <div v-if="userPaidOrderList.length > 0">
          <el-card
            v-for="item in userPaidOrderList"
            :key="item.orderListId"
            class="order"
            shadow="hover"
          >
            <div slot="header" class="clearfix">
              <el-descriptions
                :title="item.status"
                :column="3"
                size="small"
                border
              >
                <template slot="extra">
                  <el-button class="order-delete el-icon-delete" type="text">
                  </el-button>
                </template>
                <el-descriptions-item label="支付用户">
                  {{ $store.state.username }}
                </el-descriptions-item>
                <el-descriptions-item label="支付时间">
                  {{ item.time }}
                </el-descriptions-item>
                <el-descriptions-item label="支付方式">
                  微信支付
                </el-descriptions-item>
                <el-descriptions-item label="订单号">
                  {{ item.orderListId }}
                </el-descriptions-item>
                <el-descriptions-item label="实付金额">
                  {{ item.totalPrice }}元
                </el-descriptions-item>
                <el-descriptions-item label="备注"> 无 </el-descriptions-item>
              </el-descriptions>
            </div>
            <div class="order-items">
              <div
                v-for="item in item.items"
                :key="item.itemId"
                class="goods-list"
              >
                <div class="figure">
                  <img
                    :src="item.itemSwiperImgUrl[0].url"
                    width="80"
                    height="80"
                    alt=""
                  />
                </div>
                <p class="goods-list-name">{{ item.title }}</p>
                <p class="goods-list-price">
                  {{ item.discountPrice }}元 x {{ item.count }}
                </p>
              </div>
            </div>
            <div class="order-actions">
              <!-- <a href="#" class="">订单详情</a> -->
              <a
                v-if="item.status == '待支付'"
                @click="openPayDialog(item.orderListId)"
              >
                立即支付
              </a>
            </div>
          </el-card>
        </div>
        <el-empty
          :image-size="200"
          description="当前没有待支付订单。"
          v-if="userPaidOrderList.length == 0"
        ></el-empty>
      </el-tab-pane>
      <el-tab-pane label="订单回收站" name="fourth">
        <el-empty
          :image-size="200"
          description="当前没有待收货订单。"
        ></el-empty>
      </el-tab-pane>
    </el-tabs>
    <div class="order-list-search">
      <el-input
        placeholder="请输入商品名称、订单号"
        v-model="orderListSearchInput"
        class="input-with-select"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>

    <el-dialog
      center
      title="请扫码支付"
      :visible.sync="dialogPayVisible"
      width="30%"
    >
      <!-- <span>这是付款二维码</span> -->
      <img height="400" width="400" src="@/assets/QRCode.png" alt="" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPayVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOrderStatus"> 确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "UserOrderList",
  data() {
    return {
      orderListSearchInput: "",
      currentPage: 1,
      dialogPayVisible: false,
      userAllOrderList: [],
      userPayingOrderList: [],
      userPaidOrderList: [],
      nowPayingOrderListId: "",
    };
  },
  methods: {
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    openPayDialog(orderListId) {
      this.dialogPayVisible = true;
      this.nowPayingOrderListId = orderListId;
    },
    changeOrderStatus() {
      let orderListId = this.nowPayingOrderListId;
      this.$store.commit("changeOrderListPayingStatus", orderListId);
      this.userAllOrderList = this.$store.state.userOrderList;
      this.userPayingOrderList = this.$store.state.userOrderList.filter(
        (n, index) => {
          if (n.status == "待支付") {
            return n;
          }
        }
      );
      // console.log(this.userPayingOrderList);
      this.userPaidOrderList = this.$store.state.userOrderList.filter(
        (n, index) => {
          if (n.status == "待收货") {
            return n;
          }
        }
      );
      // console.log(this.userPaidOrderList);
      this.dialogPayVisible = false;
      this.$message({
        message: "支付成功!",
        type: "success",
      });
    },
  },
  created() {
    this.userAllOrderList = this.$store.state.userOrderList;
    this.$store.state.userOrderList.filter((n, index) => {
      if (n.status == "待支付") {
        this.userPayingOrderList.unshift(
          this.$store.state.userOrderList[index]
        );
      }
    });
    this.$store.state.userOrderList.filter((n, index) => {
      if (n.status == "待收货") {
        this.userPaidOrderList.unshift(this.$store.state.userOrderList[index]);
      }
    });
    // console.log(this.userPaidOrderList);
  },
};
</script>

<style scoped>
.user-order-list {
  padding: 20px;
  position: relative;
}
.user-order-list .title {
  font-size: 30px;
  font-weight: 400;
  line-height: 68px;
  color: #757575;
}

.order {
  width: 99%;
  margin-top: 20px;
}
.order:hover .order-delete {
  display: inline-block;
}
.order-delete {
  float: right;
  height: 18px;
  width: 18px;
  padding: 3px 0;
  display: none;
}

.order /deep/ .el-card__body {
  display: flex;
}
.order-items {
  flex: 7;
  padding: 0 30px;
}
.goods-list {
  position: relative;
  height: 44px;
  margin: 10px 0;
  padding: 18px 18px 18px 100px;
  line-height: 22px;
  color: #333;
}
.figure {
  position: absolute;
  left: 0;
  top: 0;
}

.order-actions {
  flex: 3;
  display: flex;
  flex-direction: column;
}
.order-actions a {
  width: 120px;
  height: 30px;
  font-size: 12px;
  line-height: 30px;
  border: 1px solid #b0b0b0;
  cursor: pointer;
  border-color: #b0b0b0;
  background: #fff;
  color: #757575;
  margin: 0 0 10px auto;
  text-align: center;
}

.pagination {
  margin: 35px 0;
  display: flex;
  justify-content: center;
}

.order-list-search {
  position: absolute;
  top: 86px;
  right: 20px;
}
.el-input {
  width: 270px;
}
.user-order-list /deep/ .el-tabs__nav-wrap::after {
  background-color: #fff;
}
</style>